<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的生命周期</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Count extends React.Component{


          constructor(props) {
              console.log('constructor')
              super(props);
              this.state = {count:0}
          }
          // 点击按钮数字+1
          add=()=>{
              const {count} = this.state
              this.setState({count:count+1})
          }
           // 卸载组件
           death=()=>{
               ReactDOM.unmountComponentAtNode(document.getElementById('app'))
           }
           // 强制更新
           force=()=>{
              this.forceUpdate()
           }

           //组件将要挂载
           componentWillMount(){
               console.log('componentWillMount')
           }


           // 组件挂载完毕
           componentDidMount(){
               console.log('componentDidMount')

           }


           // 控制组件更新的'阀门'
           shouldComponentUpdate(){
               console.log('shouldComponentUpdate')
               // 必须返回一个布尔值
               return true // false阀门关闭，无法再进行下一个生命周期钩子
           }

           // 组件即将更新
           componentWillUpdate(){
               console.log('componentWillUpdate')
           }
           // 组件完成更新
           componentDidUpdate(){
               console.log('componentDidUpdate')
           }
           // 组件将要卸载
           componentWillUnmount(){
               console.log('componentWillUnmount')

           }






           // 初始化渲染、状态更新之后
           render(){
               console.log('render')
               return (
                   <div>
                       <h2>当前数字为:{this.state.count}</h2>
                       <button onClick={this.add}>点击+1</button>
                       <button onClick={this.death}>卸载组件</button>
                       <button onClick={this.force}>强制更新</button>
                   </div>
               )
           }
       }

       class A extends React.Component{
           state = {
               carName:'奔驰'
           }
           change=()=>{
               const  {carName} = this.state
               this.setState({carName:'宝马'})
           }
           render(){
               return(
                   <div>
                       <h1>我是A组件</h1>
                       <button onClick={this.change}>换车</button>
                       <B carName={this.state.carName}/>
                   </div>
               )
           }
       }
       class B extends React.Component{
           // 组件将要接收到新到参数
           componentWillReceiveProps(){
               console.log('B----componentWillReceiveProps')
           }
           // 控制组件更新的'阀门'
           shouldComponentUpdate(){
               return true
           }
           // 组件即将更新
           componentWillUpdate(){
               console.log('B----componentWillUpdate')
           }
           // 组件完成更新
           componentDidUpdate(){
               console.log('B----componentDidUpdate')
           }
           // 组件将要卸载
           componentWillUnmount(){
               console.log('B----componentWillUnmount')

           }


           render(){
               console.log('B----render')
               return(
                   <div>我是B组件,接收到到车为:{this.props.carName}</div>
               )
           }
       }
        ReactDOM.render(<A/>,document.getElementById('app'))




    </script>
</body>
</html>
